<template>
  <div class="residence-management">
    <el-tabs v-model="activeTab" @tab-change="handleTabChange">
      <el-tab-pane label="查询" name="query">
        <ResidenceQuery />
      </el-tab-pane>
      <el-tab-pane label="办理" name="apply">
        <ResidenceApply />
      </el-tab-pane>
      <el-tab-pane label="补办" name="reissue">
        <ResidenceReissue />
      </el-tab-pane>
      <el-tab-pane label="注销" name="cancel">
        <ResidenceCancel />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import ResidenceQuery from './components/ResidenceQuery.vue'
import ResidenceApply from './components/ResidenceApply.vue'
import ResidenceReissue from './components/ResidenceReissue.vue'
import ResidenceCancel from './components/ResidenceCancel.vue'

const route = useRoute()
const router = useRouter()
const activeTab = ref('query')

// 根据路由设置活动标签
const setActiveTabFromRoute = () => {
  const routeActiveTab = route.meta?.activeTab
  if (routeActiveTab) {
    activeTab.value = routeActiveTab
  } else {
    // 默认显示查询标签
    activeTab.value = 'query'
  }
}

// 标签切换处理
const handleTabChange = (tabName) => {
  const routeMap = {
    'query': '/certificate/residence/query',
    'apply': '/certificate/residence/apply',
    'reissue': '/certificate/residence/reissue',
    'cancel': '/certificate/residence/cancel'
  }
  
  const targetRoute = routeMap[tabName]
  if (targetRoute && route.path !== targetRoute) {
    router.push(targetRoute)
  }
}

// 监听路由变化
watch(() => route.meta?.activeTab, (newTab) => {
  if (newTab) {
    activeTab.value = newTab
  }
})

onMounted(() => {
  setActiveTabFromRoute()
})
</script>

<style lang="scss" scoped>
.residence-management {
  padding: 20px;
  
  :deep(.el-tabs__header) {
    margin-bottom: 20px;
  }
  
  :deep(.el-tabs__nav-wrap) {
    padding: 0 20px;
  }
  
  :deep(.el-tabs__item) {
    font-size: 16px;
    font-weight: 500;
    padding: 0 30px;
    height: 50px;
    line-height: 50px;
  }
  
  :deep(.el-tabs__content) {
    padding: 0;
  }
}
</style>